<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布问题 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f0f9f9;
            padding-bottom: 70px;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .qa-form-container {
            background: white;
            margin: 15px;
            padding: 20px;
            border-radius: 15px;
        }
        .subject-chips {
            display: flex;
            gap: 10px;
            margin: 15px 0;
            flex-wrap: wrap;
        }
        .subject-chip {
            background: #f0f0f0;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            border: none;
        }
        .subject-chip.active {
            background: #00b8a9;
            color: white;
        }
        .image-preview {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
            margin: 10px;
        }
        .bottom-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="qa.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">发布问题</h5>
    </div>

    <!-- 问题表单 -->
    <div class="qa-form-container">
        <form id="qaForm">
            <!-- 选择科目 -->
            <div class="mb-4">
                <label class="form-label">选择科目</label>
                <div class="subject-chips">
                    <button type="button" class="subject-chip active">英语</button>
                    <button type="button" class="subject-chip">数学</button>
                    <button type="button" class="subject-chip">政治</button>
                    <button type="button" class="subject-chip">专业课</button>
                </div>
            </div>

            <!-- 问题内容 -->
            <div class="mb-4">
                <label class="form-label">问题描述</label>
                <textarea class="form-control" rows="5" 
                    placeholder="详细描述你的问题，可以包括：
1. 具体是哪个知识点
2. 遇到了什么困难
3. 已经尝试过什么方法"></textarea>
            </div>

            <!-- 添加图片 -->
            <div class="mb-4">
                <label class="form-label d-flex justify-content-between">
                    <span>添加图片（选填）</span>
                    <span class="text-muted">0/3</span>
                </label>
                <div class="d-flex align-items-center flex-wrap">
                    <button type="button" class="btn btn-outline-secondary" style="width: 100px; height: 100px; margin: 10px;">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-buttons">
        <button type="submit" class="btn btn-primary w-100">发布问题</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 科目选择
        document.querySelectorAll('.subject-chip').forEach(chip => {
            chip.addEventListener('click', () => {
                document.querySelectorAll('.subject-chip').forEach(chip => {
                    chip.classList.remove('active');
                });
                chip.classList.add('active');
            });
        });
    </script>
</body>
</html> 